<template>
  <div class="movie-container">
    
    <!-- 标签栏 -->
    <div class="tab-bar">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="switchTab(index)"
        :class="{ active: currentTab === index }"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 电影列表 -->
    <div class="movie-list">
      <div
        class="movie-item"
        v-for="movie in currentMovieList"
        :key="movie.movieId"
      >
        <img :src="movie.movieImage" alt="电影海报" class="poster" />
        <div class="movie-info">
          <h3 class="title">{{ movie.movieName }}</h3>
          <div class="score">
            <span v-if="movie.movieScore">评分: {{ movie.movieScore }}</span>
            <span v-else>暂无评分</span>
          </div>
          <!-- 修改这里：点击跳转到电影详情页 -->
          <button @click="goToMovieDetail(movie)" class="buy-ticket">购票</button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button
        v-for="page in pages"
        :key="page"
        @click="switchPage(page)"
        :class="{ active: currentPage === page }"
      >
        {{ page }}
      </button>
      <button @click="nextPage" :disabled="currentPage >= pages">
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getMoviesByPage } from '@/api/movie'; 

const router = useRouter();

const tabs = ref([
  { name: '正在热映', status: 1 },
  { name: '即将上映', status: 2 },
]);
const currentTab = ref(0);

const currentMovieList = ref([]);
const pages = ref(0);
const currentPage = ref(1);
const total = ref(0);

onMounted(() => {
  getMovieList(1);
});

async function getMovieList(pageNum) {
  try {
    const status = tabs.value[currentTab.value].status;
    currentPage.value = pageNum;

    const response = await getMoviesByPage({ status, pageNum });
    if (response.data.code === 200) {
      const result = response.data.data;
      currentMovieList.value = result.records || [];
      pages.value = result.pages || 0;
      currentPage.value = result.current || 1;
      total.value = result.total || 0;
    } else {
      console.error('获取失败:', response.data.message);
    }
  } catch (error) {
    console.error('请求异常:', error);
  }
}

const switchTab = (index) => {
  if (currentTab.value !== index) {
    currentTab.value = index;
    getMovieList(1);
  }
};

const switchPage = (page) => {
  if (currentPage.value !== page) {
    getMovieList(page);
  }
};

const nextPage = () => {
  if (currentPage.value < pages.value) {
    getMovieList(currentPage.value + 1);
  }
};

// ✅ 修改：点击购票 → 跳转到电影详情页面
const goToMovieDetail = (movie) => {
  router.push({
    path: '/movieDetail',
    query: {
      movieId: movie.movieId,
      movieName: movie.movieName,
      movieImage: movie.movieImage,
      movieScore: movie.movieScore,
      duration: movie.duration,
      type: movie.type,
      actors: movie.actors
    }
  });
};
</script>

<style scoped>
/* 样式保持不变 */
.movie-container {
  max-width: 95%;
  min-width: 1200px;
  margin: 0 auto;
  font-family: "Microsoft Yahei", sans-serif;
  padding: 0 20px;
}

.tab-bar {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  width: 100%;
}

.tab-bar button {
  padding: 10px 30px;
  margin: 0 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.tab-bar button.active {
  background-color:#a2131d;
  color: #fff;
  border-color: #a2131d;
}

.movie-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.movie-item {
  width: calc(33.333% - 14px);
  margin-bottom: 30px;
  text-align: center;
}

.poster {
  width: 100%;
  height: auto;
  border-radius: 4px;
  max-height: 450px;
  object-fit: cover;
}

.movie-info {
  padding: 15px;
}

.title {
  font-size: 18px;
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score {
  font-size: 16px;
  color: #ffb400;
  margin: 10px 0;
}

.buy-ticket {
  padding: 6px 15px;
  background-color: #a2131d;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  width: 100%;
}

.pagination button {
  padding: 8px 16px;
  margin: 0 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.pagination button.active {
  background-color:#a2131d;
  color: #fff;
  border-color: #a2131d;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
